<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="queryParams.classId"
        :placeholder="'请输入图书类别编码'"
        class="filter-item search-item"
      />
      <el-input
        v-model="queryParams.className"
        :placeholder="'请输入图书类别名称'"
        class="filter-item search-item"
      />
      <el-input
        v-model="queryParams.PClassId"
        :placeholder="'请输入图书类别描述'"
        class="filter-item search-item"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        plain
        @click="search"
      >
        {{ $t("table.search") }}
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        plain
        @click="initdata"
      >
        {{ $t("table.reset") }}
      </el-button>
      <el-dropdown
        v-has-any-permission="['lBookInfo:add', 'lBookInfo:delete']"
        trigger="click"
        class="filter-item"
      >
        <el-button>
          {{ $t("table.more") }}<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-has-permission="['lBookInfo:add']"
            @click.native="add"
            >{{ $t("table.add") }}</el-dropdown-item
          >
          <el-dropdown-item
            v-has-permission="['lBookInfo:delete']"
            @click.native="batchDelete"
            >{{ $t("table.delete") }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @selection-change="onSelectChange"
    >
      <el-table-column type="selection" align="center" width="40px" />
      <el-table-column align="center" label="图书类别编码" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.classId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图书类别名称" min-width="180px">
        <template slot-scope="scope">
          <span>{{ scope.row.className }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图书类别描述" min-width="180px">
        <template slot-scope="scope">
          <span>{{ scope.row.pclassId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <i
            v-hasPermission="['lBookInfo:list']"
            class="el-icon-view table-operation"
            style="color: #87d068"
            @click="view(row)"
          />
          <i
            v-hasPermission="['lBookInfo:update']"
            class="el-icon-setting table-operation"
            style="color: #2db7f5"
            @click="edit(row)"
          />
          <i
            v-hasPermission="['lBookInfo:delete']"
            class="el-icon-delete table-operation"
            style="color: #f50"
            @click="singleDelete(row)"
          />
          <el-link
            v-has-no-permission="[
              'lBookInfo:list',
              'lBookInfo:update',
              'lBookInfo:delete',
            ]"
            class="no-perm"
          >
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <class-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      @success="editSuccess"
      @close="editClose"
    />
    <class-view
      ref="view"
      :dialog-visible="classViewVisible"
      @close="viewClose"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import ClassEdit from './Edit';
import ClassView from './View';

export default {
  name: 'BookManage',
  components: { Pagination, ClassEdit, ClassView },
  filters: {
  },
  data() {
    return {
      dialog: {
        isVisible: false,
        title: ''
      },
      classViewVisible: false,
      tableKey: 0,
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      sort: {},
      selection: [],
      list: [],
      total: 0,
      listLoading: false
    };
  },
  computed: {
    currentUser() {
      return this.$store.state.account.user;
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    viewClose() {
      this.classViewVisible = false;
    },
    editClose() {
      this.dialog.isVisible = false;
    },
    editSuccess() {
      this.getList();
    },
    onSelectChange(selection) {
      this.selection = selection;
    },
    getList() {
      this.listLoading = true;
      this.$get('study/lClassInfo/list', {
        ...this.queryParams
      }).then(response => {
        this.list = response.data.resultBody.rows;
        this.total = response.data.resultBody.total;
        this.listLoading = false;
      });
    },
    search() {
      this.getList();
    },
    initdata() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        classId: '',
        className: '',
        pclassId: ''
      };
      this.getList()
    },
    add() {
      this.dialog.title = this.$t('common.add');
      this.dialog.isVisible = true;
    },
    singleDelete(row) {
      this.$refs.table.toggleRowSelection(row, true);
      this.batchDelete();
    },
    batchDelete() {
      if (!this.selection.length) {
        this.$message({
          message: this.$t('tips.noDataSelected'),
          type: 'warning'
        });
        return;
      }
      const contain = false;
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          const classIds = [];
          this.selection.forEach(u => {
            classIds.push(u.classId);
          });
          if (contain) {
            this.$message({
              message: this.$t('tips.containCurrentUser'),
              type: 'warning'
            });
            this.clearSelections();
          } else {
            this.delete(classIds);
          }
        })
        .catch(() => {
          this.clearSelections();
        });
    },
    clearSelections() {
      this.$refs.table.clearSelection();
    },
    delete(classIds) {
      this.loading = true;
      this.$delete(`study/lClassInfo/${classIds}`).then(res => {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        });
        this.getList();
      });
    },
    view(row) {
      this.$refs.view.setUser(row);
      this.classViewVisible = true;
    },
    edit(row) {
      this.$refs.edit.setBook(row);
      this.dialog.title = this.$t('common.edit');
      this.dialog.isVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
